<template>
    <div class="pub-header flexs">
        <div class="pub-header__left" v-if="rouet_path !== '/Home'">
            <template v-if="showBread">
                <back-page :content="title"></back-page>
            </template>
            <template v-else>
                {{ title }}
            </template>
        </div>
        <div class="pub-header__left" v-else>
            <h3>{{ title }}</h3>
        </div>

        <div class="pub-header__right" :class="{ 'right-icon': show }">
            <!-- <div class="right-item right-hover" @click="clickDemand">我有需求</div> -->
            <div class="right-item pub-header__help" @click="clickRight">
                <el-icon>
                    <Search />
                </el-icon>
                <span>帮助和服务</span>
                <el-icon class="help-left">
                    <DArrowLeft />
                </el-icon>
            </div>
        </div>

        <!-- 帮助和服务 -->
        <el-drawer title="帮助和服务" v-model="showHelp" direction="rtl" size="224px" :append-to-body="true" :destroy-on-close="true" @close="closeDeawer">
            <div class="dc-one">
                <div @click.stop="toHelp">
                    <el-input placeholder="搜索帮助文章" readonly :suffix-icon="Search"></el-input>
                </div>
                <div class="pub-header__news">
                    <div class="pub-header__news-item" v-for="item in news" :key="item.article_id" @click="toHelpDetail(item.article_id)">
                        {{ item.title }}
                    </div>
                    <p class="pub-header__news-more" @click="toHelp">查看更多</p>
                </div>
                <div class="pub-header__us flexs" @click="clickUs">
                    <el-icon size="15px">
                        <ChatDotSquare />
                    </el-icon>
                    <span>有问题？请联系我们</span>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, onBeforeUnmount } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useBaseStore } from "@store/base"
import { Search, DArrowLeft, ChatDotSquare } from "@element-plus/icons-vue"
import BackPage from "./BackPage.vue"

import EventBus from "@common/event-bus" // EventBus事件总线，任意组件通信

const route = useRoute()
const router = useRouter()
const storeBase = useBaseStore()
const { proxy } = getCurrentInstance()

const showBread = ref(false)

onMounted(() => {
    getInfos()
    getNews()
})

onBeforeUnmount(() => {
    // 取消监听
    EventBus.off("route_paths")
})

const versions = ref("")
function getInfos() {
    proxy.$axios
        .get("enterprise/info")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                let vers = {
                    title: result.title,
                    version_title: result.version_title,
                    version_id: result.version_id,
                    version: result.version,
                    end_at: result.end_at,
                    exp_date: result.exp_date,
                }
                versions.value = result
                storeBase.setVersions(vers)
                // 刷新页面时
                if (!rouet_path.value && !title.value) {
                    rouet_path.value = route.path
                    let texts = ""
                    if (route.path === "/Marketing/CouponGiveUpdate") {
                        texts = route.query.type == 1 ? "新建优惠券" : "编辑优惠券"
                    }
                    if (route.path === "/Goods/GoodsPublicUpdate") {
                        texts = route.query.type == 1 ? "添加公共商品" : "编辑公共商品"
                    }
                    if (route.path === "/Home") {
                        texts = versions.value.title
                    }
                    title.value = texts ? texts : route.meta.title
                    showBread.value = route.meta.showBread ? route.meta.showBread : false
                }
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

const rouet_path = ref("")
const title = ref("")
EventBus.on("route_paths", (val) => {
    rouet_path.value = val
    switch (val) {
        case "/Home":
            title.value = versions.value.title
            break
        case "/Marketing/CouponGiveUpdate":
            let texts = route.query.type == 1 ? "新建优惠券" : "编辑优惠券"
            title.value = texts
            showBread.value = true
            break
        case "/Goods/GoodsPublicUpdate":
            let good_texts = route.query.type == 1 ? "添加公共商品" : "编辑公共商品"
            title.value = good_texts
            showBread.value = true
            break
        default:
            val !== "/Home" && (title.value = route.meta.title)
            showBread.value = route.meta.showBread ? route.meta.showBread : false
            break
    }
})

// 文章列表
const news = ref([])
function getNews() {
    proxy.$axios
        .get("sys/article/index", {
            params: {
                cate_id: 17,
                page: 1,
                limit: 8,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                news.value = res.data.data
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
const toHelpDetail = (id) => {
    pub_tz()
    router.push({
        path: "/HelpDetail",
        query: {
            id,
        },
    })
}
// 跳转帮助更多
const toHelp = () => {
    pub_tz()
    router.push({
        path: "/Help",
        query: {
            cate_id: 17,
        },
    })
}

// 显示/关闭帮助弹窗
const show = ref(false)
const showHelp = ref(false)
const clickRight = () => {
    show.value = !show.value
    showHelp.value = true
}

// 抽屉
const closeDeawer = () => {
    showHelp.value = false
    show.value = false
}

const clickUs = () => {
    showHelp.value = false
    window.open("http://www.huashuyn.com/")
}

const clickDemand = () => {
    storeBase.setCur(null)
    storeBase.setStyle(true)
    router.push("/Demand")
}

function pub_tz() {
    showHelp.value = false
    storeBase.setCur(null)
    storeBase.setStyle(true)
}
</script>

<style lang="less" scoped>
.pub-header__us {
    margin: @margin-mdl 0px;
    border: 1px solid @themes;
    border-radius: @radius-sm;
    justify-content: center;
    height: 42px;
    color: @themes;
    cursor: pointer;

    .el-icon {
        margin-right: @margin-base;
        vertical-align: baseline;
    }

    span {
        font-size: 14px;
    }
}

.pub-header {
    position: relative;
    height: @height-mdl;
    background: #fff;
    border-bottom: @border-gray;
    padding: 0px 25px;
    font-size: @font-size-md;

    .pub-header__left {
        color: @gray-8;
        flex: none;
        cursor: default;
        h3 {
            font-size: 20px;
            color: @gray-8;
            font-weight: bold;
        }
    }
    .pub-header__right {
        display: flex;
        .right-item {
            flex: none;
            margin-left: @margin-lg;
            cursor: pointer;
        }
        .right-hover {
            &:hover {
                color: @themes;
            }
        }
        .pub-header__help {
            display: flex;
            align-items: center;

            span {
                margin-left: 5px;
            }

            .help-left {
                margin-left: 10px;
                color: #999;
                font-size: @font-size-md;
                transition: all 0.3s;
            }
        }
    }
}
.right-icon {
    .help-left {
        transform: rotateZ(180deg) !important;
    }
}

.dc-one {
    padding-bottom: @padding-xl;

    &:last-child {
        padding-bottom: 0;
    }
}

.pub-header__news {
    padding: @padding-lg 0px;
    border-bottom: @border-gray;

    .pub-header__news-item {
        color: @gray-7;
        margin-bottom: @margin-sm;

        &:last-child {
            margin-bottom: 0;
        }

        &:hover {
            color: @themes;
            cursor: pointer;
        }
    }

    .pub-header__news-more {
        color: @themes;
        cursor: pointer;
    }
}
</style>
